<template>
	<el-form class="msgEditForm" ref="msgInfo" :inline="true" :model="msgInfo" label-width="80px">
		<el-form-item :label="$t('system.msg.msgType')">
			<el-select v-model="msgInfo.msgTypeArr" style="width: 92%;" multiple :placeholder="$t('common.selectTips')">
				<el-option v-for="item in options.msgType" :key="item.dictKey" :label="item.dictValue"
					:value="item.dictKey">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item :label="$t('system.msg.msgReceiver')">
			<el-select v-model="msgInfo.msgReceiverArr" filterable multiple placeholder="请选择人员" class="filter-item">
				<el-option v-for="item in  userList" :key="item.userId" :label="item.userName" :value="item.userId" />
			</el-select>
		</el-form-item>
		<el-form-item :label="$t('system.msg.msgMailReceiver')">
			<el-input v-model="msgInfo.msgMailReceiver"></el-input>
		</el-form-item>
		<el-form-item :label="$t('system.msg.msgTitle')">
			<el-input v-model="msgInfo.msgTitle"></el-input>
		</el-form-item>
		<el-form-item style="width: 100%;" :label="$t('system.msg.msgContent')">
			<markdown-editor v-model="msgInfo.msgContent" ref="markdownEditor"    style="width: 1000px;height: 500px;" :options="markdownOptions" language="zh_CN" height="300px" />
		</el-form-item>
	</el-form>

</template>
<script>
	import MarkdownEditor from '@/components/MarkdownEditor'
	import request from '@/utils/request'
	export default {
		name: 'msgEdit',
		props: ['msgInfo'],
		components: {
			MarkdownEditor
		},
		data() {
			return {
				//所有的下拉选项
				options: {
					msgType: [],
					msgStatus: [],
				},
				languageTypeList: {
					'en': 'en_US',
					'zh': 'zh_CN',
					'es': 'es_ES'
				},
				markdownOptions: {
					hideModeSwitch: true,
					previewStyle: 'vertical'
				},
				userList: []
			}
		},
		watch: {
			msgInfo: function(val) {

			}
		},
		//页面初始化加载
		created() {
			this.getMsgType();
			this.getMsgStatus();
			this.getUserList();
		},
		methods: {
			getMsgType() {
				request({
					url: '/system/dict/queryByForm?dictGroupKey=msgType',
					method: 'post'
				}).then(response => {
					this.options["msgType"] = response.data;
				})
			},
			getMsgStatus() {
				request({
					url: '/system/dict/queryByForm?dictGroupKey=msgStatus',
					method: 'post'
				}).then(response => {
					this.options["msgStatus"] = response.data;
				})
			},
			getHtml() {
			  let html = this.$refs.markdownEditor.getHtml()
			  return html;
			},
			getUserList(){
				let _this = this;
				request({
					url: '/system/user/query',
					method: 'post'
				}).then(response => {
					debugger
					_this.userList = response.data
				})
			},
		}
	}
</script>
<style>
	.msgEditForm .el-form-item {
		width: 100%;
	}

	.msgEditForm .el-input {
		width: 62.5rem;
	}
	.tui-editor .te-preview-style-vertical .te-preview {
	    float: left;
	    /* width: 50%; */
	    width: 500px;
	}
</style>
